<template>
  <div class="page-dialog">
    <t-dialog
      v-model:visible="dialogVisible"
      :close-on-overlay-click="false"
      :close-btn="false"
      :width="width || '40vw'"
      :top="top || '80px'"
    >
      <template #header>
        <div>{{ title }}</div>
        <t-button shape="circle" variant="text" @click="cancel">
          <template #icon><t-icon name="multiply" size="30px" /></template>
        </t-button>
      </template>
      <div class="dialog-content">
        <slot></slot>
      </div>
      <template #footer>
        <t-space>
          <t-button variant="outline" theme="default" size="large" @click="cancel">
            取 消
          </t-button>
          <slot name="footer"></slot>
          <t-button theme="primary" size="large" @click="emit('confirm')" v-if="!hideConfirmBtn">
            确 定
          </t-button>
        </t-space>
      </template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{
  title: string
  width?: string
  top?: string
  hideConfirmBtn?: boolean
}>()

const emit = defineEmits(['confirm', 'cancel'])

const dialogVisible = ref(false)
const show = () => {
  dialogVisible.value = true
}
const close = () => {
  dialogVisible.value = false
}
const cancel = () => {
  dialogVisible.value = false
  emit('cancel')
}

defineExpose({
  show,
  close
})
</script>
